<template>
    <div class="container">
        <div class="monitor">
            <div class="content" v-if="dataFlag">
                <div class="title">
                    <Tabs  v-model="tabActiveName"  @on-click="setTabClick">
                        <TabPane v-for="item in list" :value="item.id" :key="item.id" :label="item.code" :icon="item.netState==0?'red':'green'"></TabPane>
                    </Tabs>
                </div>
                <div class="msg">
                    <div class="left">
                        <div class="top tj">
                            <div class="bottom" v-if="foreArmLength||rearArmLength||towerArmHeight">
                                <p>
                                    <em></em>
                                    <span>起重臂长:</span>
                                    <span>{{foreArmLength}}米</span>
                                </p>
                                <p>
                                    <em></em>
                                    <span>平衡臂长:</span>
                                    <span>{{rearArmLength}}米</span>
                                </p>
                                <p>
                                    <em></em>
                                    <span>塔臂高:</span>
                                    <span>{{towerArmHeight}}米</span>
                                </p>
                            </div>
                            <div  class="dh">
                                <img src="./../../assets/images/fse/crane/fse_hl.png" class="hl" />
                                <div class="path">
                                    <svg mlns="http://www.w3.org/2000/svg" version="1.1" style="width:60px;margin-left: 27px; height:100%">
                                        <line  id="lineAB" x1="0" y1="0" x2="30" y2="150" stroke="#979797" stroke-width="2" />
                                        <line id="lineBC" x1="60" y1="0" x2="30" y2="150" stroke="#979797" stroke-width="2" />
                                    </svg>
                                </div>
                                <img src="./../../assets/images/fse/crane/fse_dj.png" class="dj" />
                                <img src="./../../assets/images/fse/crane/fse_hw.png" class="hw" />
                                <div class="bfx" v-if="!getJSON(bfxcObj) && bfxcObj.fvsDevice" @click="getFvs(bfxcObj,1)">
                                    <img src="./../../assets/images/fse/common/camera_0.png" v-if="bfxcObj.fvsDevice.deviceStatus == 0" class="disabled" />
                                    <img src="./../../assets/images/fse/common/camera_1.png" v-if="bfxcObj.fvsDevice.deviceStatus == 1" />
                                </div>
                            </div>
                            <div class="jsc" v-if="!getJSON(jscObj)&&jscObj.fvsDevice" @click="getFvs(jscObj,2)">
                                <img src="./../../assets/images/fse/common/camera_0.png" v-if="jscObj.fvsDevice.deviceStatus == 0" class="disabled" />
                                <img src="./../../assets/images/fse/common/camera_1.png" v-if="jscObj.fvsDevice.deviceStatus == 1" />
                            </div>
                            <div class="qzb" v-if="!getJSON(qzbObj)&&qzbObj.fvsDevice" @click="getFvs(qzbObj,3)">
                                <img src="./../../assets/images/fse/common/camera_0.png" v-if="qzbObj.fvsDevice.deviceStatus == 0" class="disabled" />
                                <img src="./../../assets/images/fse/common/camera_1.png" v-if="qzbObj.fvsDevice.deviceStatus == 1" />
                            </div>
                            <div class="phb" v-if="!getJSON(phbObj)&&phbObj.fvsDevice" @click="getFvs(phbObj,4)">
                                <img src="./../../assets/images/fse/common/camera_0.png" v-if="phbObj.fvsDevice.deviceStatus == 0" class="disabled" />
                                <img src="./../../assets/images/fse/common/camera_1.png" v-if="phbObj.fvsDevice.deviceStatus == 1" />
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/crane/fse_fd.png" />
                                    <span>幅度</span>
                                </p>
                                <p class="num">
                                    <span>{{range}}</span>m
                                </p>
                                <p class="data">
                                    <span @click="getMsg(0)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/crane/fse_gd.png" />
                                    <span>高度</span>
                                </p>
                                <p class="num">
                                    <span>{{height}}</span>m
                                </p>
                                <p class="data">
                                    <span @click="getMsg(1)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/crane/fse_dz.png" />
                                    <span>吊重</span>
                                </p>
                                <p class="num">
                                    <span>{{weight}}</span>t
                                </p>
                                <p class="data">
                                    <span @click="getMsg(2)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/crane/fse_fs.png" />
                                    <span>风速</span>
                                </p>
                                <p class="num">
                                    <span>{{windSpeed}}</span>m/s
                                </p>
                                <p class="data">
                                    <span @click="getMsg(3)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/crane/momentRatio.png" />
                                    <span>力矩比</span>
                                </p>
                                <p class="num">
                                    <span>{{momentRatio}}</span>%
                                </p>
                                <p class="data">
                                    <span @click="getMsg(4)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/crane/fse_qj.png" />
                                    <span>倾角</span>
                                </p>
                                <p class="num">
                                    <span>{{dipAngle}}</span>°
                                </p>
                                <p class="data">
                                    <span @click="getMsg(6)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/crane/fse_zj.png" />
                                    <span>转角</span>
                                </p>
                                <p class="num">
                                    <span>{{turnAngle}}</span>°
                                </p>
                                <p class="data">
                                    <span @click="getMsg(7)">历史数据</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="content nodata" v-if="!dataFlag"> 暂无塔机设备,请在塔机设备页,添加并绑定塔机设备</div>
        </div>

        <Modal v-model="msgModal" title="历史数据" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div class="log">
                <div class="list">
                    <div class="item">
                        <span>数据类型:</span>
                        <span>{{ msgType }}</span>
                    </div>
                    <div class="item">
                        <span>选择日期:</span>
                        <DatePicker type="date" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd" v-model="msgTime" :clearable="false"></DatePicker>
                        <el-button type="primary" @click="searchLog" style="margin-left:20px;" size="small" plain>搜索</el-button>
                    </div>
                </div>
                <div class="eachart">
                    <div class="canvas_none" v-if="dateList.length==0">
                        <img src="../../assets/images/common/canvas_none1.png" />
                    </div>
                    <div id="line" :style="{ height: '400px', width: '800px' }"></div>
                </div>
            </div>
        </Modal>

        <Modal v-model="videomodal"  :mask-closable="false" width="700px" :footer-hide="true">
            <div slot="header" style="display:flex;justify-content: space-between;">
                <span >视频直播</span>
            </div>
            <div class="chart video-play" v-show="videoFlag"></div>
            <div class="chart" v-show="!videoFlag">
                <video
                    ref="videoElement"
                    id="videoElement"
                    controls
                    autoplay
                    muted
                    width="668"
                    height="400"
                    style="object-fit: fill;outline:none;"
                ></video>
            </div>
        </Modal>
    </div>
</template>

<script>
import "@/sever/ezuikit.js";
import {
    getCraneList,
    getCraneDateLatest,
    getCraneDateLog,
    getCranceFvsList,
    getFvsToken,
    getStreamUrl,
} from "@/api/api.js";
import { format } from "@/sever/utils.js";
import hlsjs from "hls.js";
export default {
    data() {
        return {
            typeRadio1:(h) => {
                return h('div', [
                    h('span', '标签一'),
                    h(resolveComponent('Badge'), {
                        count: 3
                    })
                ])
            },
            typeRadio2:(h) => {
                return h('div', [
                    h('span', '标签一'),
                    h(resolveComponent('Badge'), {
                        count:1
                    })
                ])
            },
            tabActiveName:"",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            list: [],
            craneId: "",
            towerArmHeight: "",
            range: "",
            height: "",
            weight: "",
            windSpeed: "",
            liftSpeed: "",
            momentRatio:"",
            derrickSpeed: "",
            dipAngle: "",
            turnAngle: "",
            msgModal: false,
            msgType: "",
            msgTime: new Date(),
            timeList: [],
            dateList: [],
            count: 0,
            msgName: "",
            activeId: -1,
            dataFlag: false,
            bfxcObj :{},
            jscObj:{},
            qzbObj:{},
            phbObj:{},
            videomodal:false,
            ezvizToken:"",
            recordPlay:"",
            htmlVideo:'',
            foreArmLength:"",
            rearArmLength:"",    
            videoFlag: true,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
    },
    methods: {
        setTabClick(name) {
            this.activeId = this.list[name].craneId;
            this.craneId = this.list[name].craneId;
            this.getCraneDate();
            this.getFvsList();
        },
        //获取塔机列表
        getAllList() {
            let params = {
                deptId: this.deptId,
                bindFlag:1,
            };
            getCraneList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        if (res.data.list.length == 0) {
                            this.dataFlag = false;
                            this.craneId = "";
                            this.activeId = -1;
                        } else {
                            this.craneId = res.data.list[0].craneId;
                            this.activeId = res.data.list[0].craneId;
                            this.dataFlag = true;
                            this.getCraneDate();
                            this.getFvsList();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getCraneDate() {
            let params = {
                craneId: this.craneId
            };
            getCraneDateLatest(params)
                .then(res => {
                    if (res.code == 200) {
                        if (res.data != undefined) {
                            this.towerArmHeight = res.data.towerArmHeight || 0;
                            this.foreArmLength = res.data.foreArmLength || 0;
                            this.rearArmLength = res.data.rearArmLength || 0;
                            this.range = res.data.range || 0;
                            this.height = res.data.height || 0;
                            this.weight = res.data.weight || 0;
                            this.windSpeed = res.data.windSpeed || 0;
                            this.dipAngle = res.data.dipAngle || 0;
                            this.turnAngle = res.data.turnAngle || 0;
                            this.momentRatio = res.data.momentRatio || 0;
                            let h = 150 + this.height;
                            let width = $(".tj").width()*3/10;
                            let w = width + this.range;
                            let lineAB = $("#lineAB");
                            let lineBC= $("#lineBC");
                            $("#lineAB").attr('y2',h);
                            $("#lineBC").attr('y2',h);
                            $(".dh").animate({left:  w +'px'});
                            $(".path").css({height:h+'px'});
                        } 
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getFvsList(){
            this.phbObj ={};
            this.bfxcObj ={};
            this.qzbObj ={};
            this.jscObj ={};
            let params = {
                craneId: this.craneId
            };
            getCranceFvsList(params).then(res=>{
                if(res.code == 200) {
                    if(res.data.list.length > 0) {
                        res.data.list.forEach(i=>{
                            if(i.cranePart == 1) {
                                this.jscObj = i;
                            } else if (i.cranePart == 2) {
                                this.qzbObj = i;
                            } else if (i.cranePart == 3) {
                                this.bfxcObj = i;
                            } else if (i.cranePart == 4) {
                                this.phbObj = i;
                            }
                        })  
                    } 
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getJSON(data){
            return JSON.stringify(data) == '{}';
        },
        getFvs(item, index) {
            console.log(item)
            if(item.fvsDevice.deviceStatus == 1){
                $(".video-play").empty();
                this.videomodal = true;
                if(item.fvsDevice.platform == "0") {
                    this.getToken(item.fvsDevice.platform);
                }
                let params = {
                    id: item.fvsDevice.id
                };
                getStreamUrl(params)
                    .then(res => {
                        if (res.code == 200) {
                            let url; 
                            if (item.fvsDevice.playMode == 2) {
                                this.videoFlag = true;
                                url = res.data.ezopenHd;
                                this.getrecordPlay(url,index)
                            } else {
                                this.videoFlag = false;
                                if(res.data.playUrl){
                                    url = res.data.playUrl;
                                    this.$refs.videoElement.setAttribute('src',url)
                                }else{
                                    url = res.data.hls;
                                    this.showVideo(url);
                                }
                            }
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        getToken(platform){
            let params ={
                deptId:this.deptId,
                platform:platform
            }
            getFvsToken(params).then(res=>{
                if(res.code == 200) {
                    this.ezvizToken = res.data.token || '';
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getrecordPlay(url,index) {
            this.htmlVideo =
                "<div id='myVideo" + index + "' /> </div>";
            $(".video-play").html(this.htmlVideo);
            this.recordPlay = new EZUIPlayer({
                id: "myVideo" + index,
                url: url,
                autoplay: true,
                accessToken:this.ezvizToken,
                decoderPath: "./../../../static",
                width: 668,
                height: 400
            });
        },
        //play for flv
        showVideo(url) {
            let video = this.$refs.videoElement; //定义挂载点
            if (hlsjs.isSupported()) {
                this.hlsjs = new hlsjs();
                this.hlsjs.loadSource(url);
                this.hlsjs.attachMedia(video);
                this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                    this.video.play();
                });
                this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                    // console.log(event, data);
                    // 监听出错事件
                });
            } else {
                this.$message.error("不支持的格式");
                return;
            }
        },
        cancelVideo() {
            if (this.hlsjs) {
                this.$refs.videoElement.pause();
                this.hlsjs.destroy();
                this.hlsjs = null;
            }
        },
        flv_close() {
            this.videomodal = false;
            if(!this.videoFlag){
                this.$refs.videoElement.setAttribute('src','')
                this.cancelVideo();
            }else if(this.videoFlag){
                this.recordPlay.stop();
            }
        },
        getMsg(type) {
            this.msgTime = new Date();
            if (type == 0) {
                this.msgType = "幅度";
                this.msgName = "米（m）";
            } else if (type == 1) {
                this.msgType = "高度";
                this.msgName = "米（m）";
            } else if (type == 2) {
                this.msgType = "吊重";
                this.msgName = "吨（t）";
            } else if (type == 3) {
                this.msgType = "风速";
                this.msgName = "米每秒（m/s）";
            } else if(type == 4){
                this.msgType = "力矩比";
                this.msgName = "百分比（%）";
            } else if (type == 6) {
                this.msgType = "倾角";
                this.msgName = "角度（°）";
            } else if (type == 7) {
                this.msgType = "转角";
                this.msgName = "角度（°）";
            }
            this.count = type;
            this.getLogMsg(type);
        },
        searchLog() {
            this.getLogMsg(this.count);
        },
        getLogMsg(type) {
            this.timeList = [];
            this.dateList = [];
            let params = {
                craneId: this.craneId,
                date: format(this.msgTime, "YYYY-MM-DD")
            };
            getCraneDateLog(params)
                .then(res => {
                    if (res.code == 200) {
                        this.msgModal = true;
                        if (res.data.list.length > 0) {
                            res.data.list.forEach(i => {
                                this.timeList.push(i.time);
                                if (type == 0) {
                                    this.dateList.push(i.range);
                                } else if (type == 1) {
                                    this.dateList.push(i.height);
                                } else if (type == 2) {
                                    this.dateList.push(i.weight);
                                } else if (type == 3) {
                                    this.dateList.push(i.windSpeed);
                                } else if (type == 4){
                                    this.dateList.push(i.momentRatio);
                                }else if (type == 6) {
                                    this.dateList.push(i.dipAngle);
                                } else if (type == 7) {
                                    this.dateList.push(i.turnAngle);
                                } 
                            });
                        }
                        this.darwLine();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        darwLine() {
            let line = this.$echarts.init(document.getElementById("line"));
            line.setOption({
                color: ["rgb(255, 179, 94)"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                    // formatter: "{b0}<br/>{a0}: {c0}"
                },
                grid: {
                    top: "18%",
                    left: "50px",
                    right: "14px",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    data: this.timeList,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        // lineStyle: {
                        //   color: "#00FFFF"
                        // }
                    }
                },
                yAxis: {
                    show: true,
                    name: this.msgName,
                    splitLine: {
                        //去除网格线
                        show: false
                    },
                    axisLine: {
                        // lineStyle: {
                        //   color: "#00FFFF"
                        // }
                    }
                },
                series: [
                    {   
                        name: this.msgName,
                        type: "line",
                        smooth: true ,
                        data: this.dateList,
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                // label: {
                                //   show: true, //开启显示
                                //   position: "top", //在上方显示
                                //   textStyle: {
                                //     //数值样式
                                //     color: "#02C0C0",
                                //     fontSize: 16
                                //   }
                                // },
                                lineStyle: {
                                    color: "#1891FF" //折线的颜色
                                },
                                color: "#2BB6FF"
                            }
                        }
                    }
                ]
            });
        }
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>


<style scoped lang="scss">
@import "./../../assets/style/fse.scss";
@function pxToRem($val) {
    @return $val/100 + rem;
}
/deep/.container{
    // background-color: #F5F5F5;
    .content{
        /deep/.ivu-tabs-nav-scrollable{
            padding: 0 40px !important;
        }
    }
}
.tj{
    background-image: url(./../../assets/images/fse/crane/fse_tj.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    .bottom{
        position:absolute;
        bottom: pxToRem(10);
        right: pxToRem(10);
        padding: pxToRem(10);
        background: #EDF9FD;
        border: 1px solid var(--themeColor);
        border-radius: pxToRem(10);
        p{  
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            // margin-bottom: pxToRem(10);
            em{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background:var(--themeColor);
                margin-right: pxToRem(10);
            }
            span{
                // text-align: right;
                width: pxToRem(100);
                font-size: pxToRem(14);
                color:var(--themeColor);
            }
            span:first-child{
                width: pxToRem(80);
                margin-right: pxToRem(10); 
                
            }
        }
    }
    .dz{
        width: pxToRem(30);
        height: pxToRem(30);
        position: absolute;
        top:pxToRem(70);
        left: 27%;
        .img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .dh{
            width: 110px;
            height: auto;
            position: absolute;
            top: 23%;
            left: 30%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .hw{
                width: pxToRem(80);
                height: pxToRem(80);
                margin-top:pxToRem(-20);
                margin-right:pxToRem(10);
                z-index: 0;
            }
            .dj{
                z-index: 1;
            }
            .path{
                width: 100%;
                height: 150px;
            }
            .hl{
                width: 80px;
            }
            .bfx{
                width: 30px;
                height: 30px;
                position: absolute;
                top: 0;
                left: 40px;
                img{
                    display: block;
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                }
            }
        }
    
    .jsc{
        position: absolute;
        width: 30px;
        height: 30px;
        top: 20%;
        left: 28.5%;
        img{
            display: block;
            width: 30px;
            height: 30px;
            cursor: pointer;
        }
    }
    .phb{
        position: absolute;
        width: 30px;
        height: 30px;
        top: 33%;
        left: 28.5%;
        img{
            display: block;
            width: 30px;
            height: 30px;
            cursor: pointer;
        }
    }
    .qzb{
        position: absolute;
        width: 30px;
        height: 30px;
        top: 20%;
        left: 70%;
        img{
            display: block;
            width: 30px;
            height: 30px;
            cursor: pointer;
        }
    }
    .disabled{
        cursor: no-drop !important;
    }
}
>>>.ivu-tabs-nav .ivu-tabs-tab .ivu-icon{
        width: 10px;
        height: 10px;
        border-radius: 50%;
    &.ivu-icon-green{
        background: #28D79C;
    }
    &.ivu-icon-red{
        background:#FF4848;
    }
}
</style>
